<template>
	<view class="">
		<u-navbar title=" " :safeAreaInsetTop="true" :autoBack="true">
			<view class="u-nav-slot" slot="right">
				<view class="flex align-c nav_right" @click="open('show')">
					<image src="/static/home/sort-icon.png" mode="aspectFill" class="nav_sort-icon" />
					<view v-if="typeIndex|| typeIndex === 0">{{ typeList[typeIndex].name }}</view>
					<view v-else>请选择</view>
				</view>
			</view>
		</u-navbar>
		<view :style="{paddingTop:customBar+'px',height: '2rpx'}"></view>
		
		<view class="user flex" v-for="(v,i) in list" :key="i">
			<image v-if="v && v.user && v.user.avator" :src="$img(v.user.avator)" mode="aspectFill" class="user--head-img" />
			<image v-else src="/static/head.png" mode="aspectFill" class="user--head-img" />
			<view class="f1">
				<view class="">
					<view class="between align-c user_name">
						<view v-if="v && v.user && v.user.name">用户{{ v.user.name }}</view>
						<view class="gray" v-if="v && v.user && v.user.created_at">{{ v.user.created_at }}</view>
					</view>
					<view class="flex align-c rate_val">
						<text>评分</text>
						<u-rate active-color="#F17816" :value="parseInt(v.stars)/2" :readonly="true" size="16" gutter="2"></u-rate>
						<text class="num">{{ v.stars }}分</text>
					</view>
				</view>
				<view class="flex align-c">
					<image src="/static/mine/label.png" mode="widthFix" class="label-tag" />
					<view class="">{{ v.detail }}</view>
				</view>
				<view class="between align-c lesson-box">
					<view class="flex">
						<image :src="$img(v.cover)" mode="aspectFill" class="img" />
						<view class="">{{ v.title }} ({{ v.type==1?'商品':(v.type==2?'活动':(v.type==3?'私教课程':(v.type==4?'教练':'门店')))}})</view>
					</view>
					<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
				</view>
			</view>
		</view>
		
		<u-popup :show="show" :round="10" mode="bottom">
			<view class="item_box">
				<view class="item" v-for="(item,index) in typeList" :key="index" @click="checkType(index)">{{ item.name }}</view>
				<view class="item_red" @click="close('show')">取消</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
export default {
	data() {
		return {
			show: false,
			typeList: [
				// {
				// 	name: '商品',
				// 	type: 1
				// },
				// {
				// 	name: '活动',
				// 	type: 2
				// },
				{
					name: '私教课程',
					type: 3
				},
				{
					name: '教练',
					type: 4
				},
				// {
				// 	name: '门店',
				// 	type: 5
				// }
			],
			typeIndex: 0,
			list: [],
			customBar: 0,
			shopId: '',
			info: null,
		}
	},
	onLoad(opt) {
		this.getSystemInfo();
		this.shopId = uni.getStorageSync('shopId');
		this.getUserEvaluation();
	},
	methods: {
		getSystemInfo() {
			uni.getSystemInfo({
				success: (e) => {
					this.customBar = e.statusBarHeight + 44;
				}
			});
		},
		open(n) {
			this[n] = true;
		},
		close(n) {
			this[n] = false;
		},
		checkType(i) {
			this.typeIndex = i;
			this.show = false;
			this.getUserEvaluation();
		},
		async getUserEvaluation() {
			let res = await this.$api.get(`staff/order/comments`,{
				type: this.typeList[this.typeIndex].type,
				obid: '',
			});
			if(res.code == 200) {
				let arr = res.data.data;
				arr.forEach(v => {
					let str = v.detail;
					str = str.replace(/\[/g,"");
					str = str.replace(/\]/g,"");
					str = str.replace(/\"/g,"");
					v.detail = str;
				})
				this.list = arr;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.nav_sort-icon {
		width: 29rpx;
		height: 29rpx;
		margin-right: 10rpx;
	}
	.nav_right {
		// margin-right: 27rpx;
		font-size: 24rpx;
	}
	.place {
		height: 45px;
		background-color: #ffffff;
	}
	.arrow-right {
		font-size: 24rpx;
		.screen {
			width: 29rpx;
			height: 29rpx;
			margin-right: 10rpx;
		}
	}
	
	.user {
		background-color: #FFF;
		padding: 18rpx 33rpx;
		font-size: 20rpx;
		margin: 20rpx 0;
		&--head-img {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			background-color: #F1F1F1;
		}
		&_name {
			font-size: 27rpx;
		}
		.img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background-color: #FFF;
			margin-right: 14rpx;
		}
		.label-tag {
			width: 24rpx;
			height: 24rpx;
			margin: 20rpx 0;
			margin-right: 16rpx;
		}
		.into {
			width: 11rpx;
			height: 21rpx;
		}
		.lesson-box {
			padding: 17rpx 19rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			font-size: 24rpx;
		}
	}
	.rate_val {
		margin-bottom: 8rpx;
		font-size: 20rpx;
		.num {
			color: #F17816;
		}
	}
</style>